{% extends 'base.html' %}
{% load staticfiles %}
{% block content %}

    <section class="slider">
        <div class="flexslider">
            <ul class="slides">
                <li clearfix>
                    <div class="col-sm-6 slider_right">
                        <div class="col-sm-12 slider_caption">
                            <h3>Socialnetwork</h3>
                            <h4>Lorem Ipsum</h4>
                        </div>
                    </div>
                    <div class="col-sm-6"><img src="{% static 'images/4.png' %}" alt=""/></div>
                </li>
                <li clearfix>
                    <div class="col-sm-6"><img src="{% static 'images/9.png' %}" alt=""/></div>
                    <div class="col-sm-6 slider_left">
                        <div class="col-sm-12 slider_caption1">
                            <h3>Entrepreneurs</h3>
                            <h4>Lorem Ipsum</h4>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="clearfix"></div>
    </section>
    <div class="box_3 clearfix">
        <div class="container">
            <div class="heading_1 col-lg-3 col-md-3 col-sm-12 col-xs-12">
                <div class="heading column heading-v1 separator_align_right">
                    <div class="heading-inner">
                        <small class="subheading"> introducing</small>
                        <h4>新开课程</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-9 row-inner">
                <div class="col-md-12 row-inner_1">
                    <div class="col-md-6 col-inner">
                        {% for course in left_new_courses %}
                        <ul class="classi_1">
                            <li class="classi_1-left"><img src="{{ MEDIA_URL }}{{ course.image }}" class="img-responsive" alt=""/></li>
                            <li class="classi_1-right">
                                <h4><a href="{% url 'course:course_level' course.id %}">{{ course.name }}</a></h4>
                                <p>{{ course.desc|slice:"30" }}...</p>
                            </li>
                            <div class="clearfix"></div>
                        </ul>
                        {% endfor %}
                    </div>
                    <div class="col-md-6 col-inner">
                        {% for course in right_new_course %}
                        <ul class="classi_1">
                            <li class="classi_1-left"><img src="{{ MEDIA_URL }}{{ course.image }}" class="img-responsive" alt=""/></li>
                            <li class="classi_1-right middle">
                                <h4><a href="{% url 'course:course_level' course.id %}">{{ course.name }} </a></h4>
                                <p style="color: #999;">{{ course.desc|slice:"30" }}...</p>
                            </li>
                            <div class="clearfix"></div>
                        </ul>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <marquee direction="left" style="background:#000; color:#F3DB28;">
        Mauris volutpat sagittis dolor, ac cursus nibh ultricies ac. Mauris lacinia nunc non venenatis aliquam. Aliquam
        id interdum risus. Integer tempor nulla suscipit congue commodo. Nam congue enim purus, non scelerisque odio
        mollis sed. Ut quis felis non lectus dignissim tristique.
    </marquee>
    <div class="box_1">
        <div class="container">
            <div class="box-info clearfix ">
                <div class="heading_1 col-lg-3 col-md-3 col-sm-12 col-xs-12">
                    <div class="heading column heading-v1 separator_align_right">
                        <div class="heading-inner">
                            <small class="subheading"> introducing</small>
                            <h4>推荐项目</h4>
                        </div>
                    </div>
                </div>
                <div class="col-lg-9 col-md-9 right_grid">
                    <h3>The standard chunk of Lorem Ipsum used since the 1500s. </h3>
                    <h4>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                        the industry's standard dummy text ever since the 1500s</h4>
                    <p>It is a long established fact that a reader will be distracted by the readable content of a page
                        when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
                        distribution of letters</p>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
    <marquee direction="left" style="background:#000; color:#F3DB28;">
        Mauris volutpat sagittis dolor, ac cursus nibh ultricies ac. Mauris lacinia nunc non venenatis aliquam. Aliquam
        id interdum risus. Integer tempor nulla suscipit congue commodo. Nam congue enim purus, non scelerisque odio
        mollis sed. Ut quis felis non lectus dignissim tristique.
    </marquee>
    <div class="tabs_list">
        <div class="container">
            <div class="heading_1 col-lg-3 col-md-3 col-sm-12 col-xs-12">
                <div class="heading column heading-v1 separator_align_right">
                    <div class="heading-inner">
                        <small class="subheading"> introducing</small>
                        <h4>推荐文章</h4>
                    </div>
                </div>
            </div>
            <div class="bs-example bs-example-tabs col-md-9" role="tabpanel" data-example-id="togglable-tabs">
                <div id="myTabContent" class="tab-content">
                    <div role="tabpanel" class="tab-pane fade in active" id="home" aria-labelledby="home-tab">
                        <div class="panel-body">
                            {% for post in recommend_posts %}
                            <div class="pull-left" style="margin:0 5px;">
                                <a class="thumbnail" href="index_detail.html">
                                    <img src="{{ MEDIA_URL }}{{ post.image }}" width="50" height="50">
                                </a>
                            </div>
                            <div class="panel-body_1">
                                <h3>
                                    <a href="{% url 'article:article_detail' post.category post.id %}" style="text-transform: capitalize;"> {{ post.title }}</a>
                                    <div class="pull-right"><i class="fa fa-eye"></i> {{ post.click_count }}</div>
                                </h3>
                                <h4>
                                    <a href="{% url 'article:article_detail' post.category post.id %}">{{ post.desc|slice:"50" }}...</a>
                                </h4>
                            </div>
                            <div class="clearfix"></div>
                            <hr>
                            {% endfor %}

                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

{% endblock %}
